<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>抑郁症在线检测平台-测试</title>
    <link href="/css/examMain.css" rel="stylesheet" type="text/css"/>
    <link href="/css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="/css/test.css" rel="stylesheet" type="text/css"/>

    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }

    </style>
</head>

<body>
<div class="main">
    <!--nr start-->
    <div class="test_main">
        <div class="nr_left">
            <div class="test">
                <form action="" method="post">
                    <input type="hidden" id="categoryId" th:value="${papers.get(0).getCategoryId()}">
                    <div class="test_title">
                        <font><input type="button" onclick="submitPaper()" name="test_jiaojuan" value="提交测试"></font>
                    </div>
                    <input type="hidden" id="totalCount" th:value="${paperSize}">
                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>单选题</h2>
                            <p>
                                <span>共</span><i class="content_lit" th:text="' '+${paperSize}+' '"></i><span>题</span>
                            </p>
                        </div>
                    </div>
                    <div class="test_content_nr">
                        <ul>

                                <li th:id="${paper.id}" th:each="paper:${papers}">
                                    <div class="test_content_nr_tt">
                                        <i th:text="${paperStat.count}"></i>
                                        <span th:text="${paper.title}"></span>

                                    </div>

                                    <div class="test_content_nr_main">
                                        <ul>
                                            <li class="option">
                                                <input type="radio" th:id="'answer_'+${paper.id}+'_option_1'" value="A"
                                                       class="radioOrCheck" th:name="'answer_'+${paper.id}"/>
                                                <label th:for="'answer_'+${paper.id}+'_option_1'">
                                                    A.
                                                    <p class="ue" style="display: inline;" th:text="${paper.a}"></p>
                                                </label>
                                            </li>

                                            <li class="option">
                                                <input type="radio" th:id="'answer_'+${paper.id}+'_option_2'" value="B"
                                                       class="radioOrCheck" th:name="'answer_'+${paper.id}"
                                                />
                                                <label th:for="'answer_'+${paper.id}+'_option_2'" >
                                                    B.
                                                    <p class="ue" style="display: inline;" th:text="${paper.b}"></p>
                                                </label>
                                            </li>
                                            <li class="option">
                                                <input type="radio" th:id="'answer_'+${paper.id}+'_option_3'" value="C"
                                                       class="radioOrCheck" th:name="'answer_'+${paper.id}"
                                                />
                                                <label th:for="'answer_'+${paper.id}+'_option_3'">
                                                    C.
                                                    <p class="ue" style="display: inline;" th:text="${paper.c}"></p>
                                                </label>
                                            </li>
                                            <li class="option">
                                                <input type="radio" th:id="'answer_'+${paper.id}+'_option_4'" value="D"
                                                       class="radioOrCheck" th:name="'answer_'+${paper.id}"
                                                />
                                                <label th:for="'answer_'+${paper.id}+'_option_4'">
                                                    D.
                                                    <p class="ue" style="display: inline;" th:text="${paper.d}"></p>
                                                </label>
                                            </li>

                                        </ul>
                                    </div>
                                </li>

                        </ul>
                    </div>
                </form>
            </div>

        </div>
        <div class="nr_right">
            <div class="nr_rt_main">
                <div class="rt_nr1">
                    <div class="rt_nr1_title">
                        <h1>
                            <i class="icon iconfont"></i>答题卡
                        </h1>
                    </div>

                    <div class="rt_content">
                        <div class="rt_content_tt">
                            <h2>单选题</h2>
                            <p>
                                <span>共</span><i class="content_lit" th:text="${paperSize}"></i><span>题</span>
                            </p>
                        </div>
                        <div class="rt_content_nr answerSheet">
                            <ul>

                                    <li th:each="paper:${papers}"><a th:href="'#'+${paper.id}" th:text="${paperStat.count}"></a></li>


                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--nr end-->
    <div class="foot"></div>
</div>

<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/jquery.easy-pie-chart.js"></script>
<!--时间js-->
<script src="/js/jquery.countdown.js"></script>
<script>

    window.jQuery(function ($) {
        "use strict";

        $('time').countDown({
            with_separators: false
        });
        $('.alt-1').countDown({
            css_class: 'countdown-alt-1'
        });
        $('.alt-2').countDown({
            css_class: 'countdown-alt-2'
        });

    });

    $(function () {
        $('li.option label').click(function () {

            var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); // 得到题目ID
            // alert(examId)
            var cardLi = $('a[href=#' + examId + ']'); // 根据题目ID找到对应答题卡
            // 设置已答题
            if (!cardLi.hasClass('hasBeenAnswer')) {
                cardLi.addClass('hasBeenAnswer');
            }

        });
    });

    function submitPaper() {
        if (!confirm("确认提交试卷")) {
            return false;
        }
        // 比较提交的答案数目和总题目数是否一致

        var answer = "";
        $('input:radio:checked').each(function () {
            // alert($(this).val());
            answer = answer + "," + $(this).val();
        });
        console.log(answer);
        var total = $("#totalCount").val();
        console.log(total);
        var check = answer.split(",").length -1;
        console.log(check);
        if (parseInt(check) !== parseInt(total)) {
            alert("请选择做完试题")
            return false;
        }
        window.location.href = '/paper/detail?answer=' + answer+"&categoryId=" + $("#categoryId").val();

    }

</script>


</body>

</html>